<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>个人资料</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="../statics/js/rem.js"></script>
    <script src="../statics/js/jquery.min.js" type="text/javascript"></script>
    <script src="../statics/js/jquery-1.8.3.js"></script>
    <script src="../statics/js-pzz/personaldata.js"></script>

    <link rel="stylesheet" href="../statics/css/yz.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/page.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/personaldata.css"/>
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link rel="stylesheet" type="text/css" href="../statics/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/area.css"/>
    <%--<script src="../statics/js/jquery-1.8.3.min.js" type="text/javascript"></script>--%>
    <script type="text/javascript" src="../statics/js-pzz/foot.js"></script>
    <link rel="stylesheet" href="../statics/pzz-css/public.css">
    <link rel="stylesheet" href="../statics/pzz-css/swiper.min.css">
    <script src="../statics/js/dyselect.js"></script>
    <%--<script src="../statics/js/jquery-1.10.2.js"></script>--%>
    <script src="../statics/js/swiper.min.js"></script>
    <script src="../statics/js/index.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
        $(function () {
            //alert("zz");
            /*身份證中間為星號*/
            var tmp = '${user.cardId}';
            console.log(tmp.replace(/(.{5}).*(.{5})/, "$1******$2"));
            $("#cardId").val(tmp.replace(/(.{5}).*(.{5})/, "$1******$2"));
        });
    </script>
    <style>
        html {
            background-color: #f2f3f7 !important;
        }

        .kinerDatePickerInput {
            width: 80%;
            height: 100px;
            background-color: #FFFFFF;
            border: 1px solid orangered;
            font-size: 24px;
            padding-left: 30px;
            border-radius: 15px;
            margin: 100px auto;
            display: block;
            line-height: 100px;
            color: #999999;
        }

        .btn {
            width: 80%;
            height: 100px;
            line-height: 100px;
            color: #FFFFFF;
            background-color: orangered;
            border-radius: 15px;
            border: none;
            outline: none;
            margin: 30px auto;
            font-size: 36px;
            display: block;
        }

        .input_ {
            margin-left: -15px;
        }

        .select-area {
            position: relative;
            overflow: hidden;
        }

        .select-area select {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
        }

        .main {
            margin-top: 10px;
            height: 200px;
            background-repeat: round;
            background-image: url('../statics/fileUplodaImage/${user.image}');
            position: relative;
            top: 0px;
            -webkit-filter: blur(5px);
            filter: blur(5px);
        }

        .imgss {
            position: absolute;
            top: 86px;
            left: 145px;

        }
    </style>
    <link rel="stylesheet" href="../statics/pzz-css/index.css?rev=ac6ed5b7b7b35822066a7c1ff4367280">
</head>
<%
    Object name = session.getAttribute("user");
    if (name == null) {
        out.print("<script>alert('请登录');location='../jsp/sign.jsp'</script>");
    }
%>
<div class="headertwo clearfloat" id="header" style="height: 1.2rem;">
    <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"
                                                            style="font-size: .4rem;"></i></a>
    <p class="fl" style="font-size: .4rem;">个人资料</p>
    <span id="save" style="margin-right:-5px">保存</span>
</div>

<div style="padding-top: 1rem;">
    <div class="main"></div>
    <div class="imgss">
        <img id="Headportrait" src="<%=path%>/statics/fileUplodaImage/${user.image}" style="height:80px;width:83px"/>
        <%--<input type="file" onChange="previewImage(this)"  id="previewImg">--%>
        <span id="camera" class="glyphicon glyphicon-camera" aria-hidden="true"></span>
    </div>
    <form action="../user/updateUsers.html" method="post" id="sub">
        <input type="text" class="imgss" placeholder="请输入用户名" value="${user.usersName}" name="usersName" id="usersName"
               style="font-size: 0.4rem;color: white;margin-top:71px;"/>
        <input id="hide" type="hidden" value="${user.users_id}" name="users_id">

</div>

<div style="">
    <div class="ui-form-item ui-border-b">
        <label style="color: #272727;font-weight: inherit;">真实姓名</label>
        <div class="">
            <input class="input_" type="text" value="${user.name}" id="name" name="name" placeholder="请输入" dir="rtl"
                   style="" maxlength="15"/>
        </div>
       <%-- <div class="ui-form-item ui-border-b" style="">
            <label style="color: #272727;font-weight: inherit;">出生日期</label>
            <div class="ui-select">
                <input type="hidden" name="birthday" id="birthday"
                       value="<fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/>">
                <div style="text-align: right;margin-right: 15px;position: relative;" id="kinerDatePickerInput1"
                     tabindex="0" title="请选择出生年月日" startYear="1950" default-val="1995-1-1" onclick="ok()">
                    <fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/></div>
            </div>
        </div>--%>
        <div class="ui-form-item ui-border-b ">
            <label style="color: #272727;font-weight: inherit;">身份证</label>
            <div class="">
                <input id="cardId" class="input_" type="text" name="cardId" value="${user.cardId}" placeholder="请输入"
                       style="text-align: right" maxlength="18" onkeyup="value=value.replace(/[^\d]/g,'')"/>
            </div>
        </div>

        <div class="ui-form-item ui-border-b p-list p-listwo clearfloat box-s">
            <label style="color: #272727;font-weight: inherit;">居住地址</label>
            <div class="ui-select">
                <input class="input_   e" id="expressArea1" value="${user.address}" name="address" data-name="custRa"
                       data-required="true" data-label="居住地址" placeholder="选择省市区" readonly style="text-align: right">
            </div>
        </div>
        <div class="ui-form-item ui-border-b">
            <label style="color: #272727;font-weight: inherit;">性别</label>
            <div class="ui-select">
                <div class="select-area">
                    <input type="text" name="sex" class="btn1" style="text-align: right;" placeholder="请选择"
                           value="${user.sex}">
                    <div class="select_box select_box1" style="z-index: 999;"></div>
                </div>
            </div>
        </div>
        <div class="ui-form-item ui-border-b">
            <label style="color: #272727;font-weight: inherit;">血型</label>
            <div class="ui-select">
                <div class="select-area">
                    <input type="text" name="xuexing" style="text-align: right;" class="btn2" placeholder="请选择"
                           value="${user.xuexing}">
                    <div class="select_box select_box2" style="z-index: 999;"></div>
                </div>
            </div>
        </div>
        <div class="ui-form-item ui-border-b p-list p-listwo clearfloat box-s">
            <label style="color: #272727;font-weight: inherit;">教育背景</label>
            <div class="ui-select">
                <div class="select-area">
                    <input type="text" name="education" style="text-align: right;" class="btn3" placeholder="请选择"
                           value="${user.education}">
                    <div class="select_box select_box3" style="z-index: 999;"></div>

                </div>
            </div>
        </div>
        <div class="ui-form-item ui-border-b p-list p-listwo clearfloat box-s" style="">
            <label style="color: #272727;font-weight: inherit;">工作信息</label>
            <div class="">
                <input id="work" class="input_" type="text" value="${user.work}" placeholder="请输入" name="work"
                       style="text-align: right" maxlength="20"/>
            </div>
        </div>
    </div>

    </form>
    <div class="browser">

        <!--选择地区弹层-->
        <section id="areaLayer" class=" express-area-box areaLayer">
            <header>
                <h3>选择省市区</h3>
                <div class="selet-area-wrap">
                    <p><span class="one"></span></p>
                    <p><span class="two"></span></p>
                    <p><span class="three"></span></p>
                </div>
                <div class="hot-city">
                    <p>热门城市</p>
                    <ul>
                        <li onClick="selectPP(0,1)">北京</li>
                        <li onClick="selectPP(10,1)">上海</li>
                        <li onClick="quickselectC(18,0)">广州</li>
                        <li onClick="quickselectC(18,1)">深圳</li>
                        <li onClick="quickselectC(12,0)">杭州</li>
                        <li onClick="quickselectC(11,0)">南京</li>
                        <li onClick="quickselectC(11,4)">苏州</li>
                        <li onClick="selectPP(1,1)">天津</li>
                        <li onClick="quickselectC(16,0)">武汉</li>
                        <li onClick="quickselectC(17,0)">长沙</li>
                        <li onClick="selectPP(21,1)">重庆</li>
                        <li onClick="quickselectC(22,0)">成都</li>
                    </ul>
                    <p>选择省份/地区</p>
                </div>
                <a id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
                <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
            </header>
            <article id="areaBox">
                <ul id="areaList" class="area-list"></ul>
            </article>
        </section>
        <!--遮罩层-->
        <div id="areaMask" class="mask"></div>
    </div>
</div>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../statics/js-pzz/libs/flexible.debug.js"></script>
<script src="../statics/js-pzz/libs/flexible_css.debug.js"></script>
<script src="../statics/js-pzz/libs/mobileFix.js"></script>
<script src="../statics/js-pzz/libs/swiper.min.js"></script>
<script src="../statics/js-pzz/libs/kinerDatePicker.js"></script>
<script>
    $('#kinerDatePickerInput1').kinerDatePicker({
        clickMaskHide: true,
        showHandler: function (ctx) {
            console.log("显示时间选择器:", ctx);
        },
        hideHandler: function (ctx) {
            console.log("隐藏时间选择器:", ctx);
        },
        changeHandler: function (vals, ctx) {
            console.log("时间改变:", vals, ctx);
        },
        okHandler: function (vals, ctx) {
            console.log("确定选择:", vals, ctx);
        },
        cancelHandler: function (ctx) {
            console.log("取消选择:", ctx);
        }
    });
    $('#btn1').click(function () {
        console.log($('#kinerDatePickerInput1').kinerDatePickerVal());
    });
    $(function () {
        $(".select-area .select-value").each(function () {
            if ($(this).next("select").find("option:selected").length != 0) {
                $(this).text($(this).next("select").find("option:selected").text());
            }
        });
        $(".select-area select").change(function () {
            var value = $(this).find("option:selected").text();
            $(this).parent(".select-area").find(".select-value").text(value);
        });
    })

</script>

</body>
<script type="text/javascript" src="../statics/slick/slick.min.js"></script>
<script type="text/javascript" src="../statics/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="../statics/js-pzz/tchuang.js"></script>
<script type="text/javascript" src="../statics/js/hmt.js"></script>
<script type="text/javascript" src="../statics/js/personaldata.js"></script>
<script src="../statics/js/jquery.area.js" type="text/javascript" charset="utf-8"></script>
</html>